<template>
	<view class="msg-card" v-for="(item,index) in props.cardList" :key="index">
		<view class="msg-card-img" :style="{backgroundColor:item.bgcColor}">
			<view class="msg-card-img-content" :style="{width:item.msgHeaderImg.imgWidth,height:item.msgHeaderImg.imgHeight}">
				<image :src="item.msgHeaderImg.imgsSrc" mode="heightFix"></image>
			</view>
		</view>
		<view class="msg-card-text">
			<view class="msg-card-title">
				<text>{{item.msgTitle}}</text>
			</view>
			<view class="msg-card-msg">
				<view class="msg-card-num" v-if="index.msgNotReadNum>0">
					<text>[</text><text>{{item.msgNotReadNum}}</text><text>]</text>
				</view>
				<view class="msg-card-content">
					<text>{{item.msgMainContent}}</text>
				</view>
			</view>
			<view class="msg-card-time">
				<text>{{item.msgNotReadTime}}</text>
			</view>
		</view>
	</view>
</template>

<script setup>
	const props = defineProps({
		cardList:{
			type:Array,
			default: () => [{}],
		}
	})
	// console.log(props.cardList[0].msgHeaderImg.imgSrc);
</script>

<style lang="scss" scoped>
	uni-image{
		height: 100%;
	}
	

	.msg-card{
		display: flex;
		align-items: center;
		width: 100%;
		height: 140rpx;
		// border: 1px black solid;
			
		>.msg-card-img{
			//  margin-left: 20rpx;
			height: 100rpx;
			width: 100rpx;
			// border: 1px black solid;
			border-radius: 50%;
			overflow: hidden;
			display: flex;
			justify-content: center;
			align-items: center;
			>.msg-card-img-content{
				height: 60%;
				width: 60%;
			}
		}
		
		.msg-card-text{
			margin-left: 25rpx;
			>.msg-card-title{
				font-size: 35rpx;
				font-weight: 600;
				color: rgba(0,0,0,0.8);
			}
			>.msg-card-msg{
				display: flex;
				color: rgb(173,173,173);
			}
			>.msg-card-time{
				font-size: 20rpx;
				color: rgb(173,173,173);
			}
		}
	}
</style>